<template>
  <a-modal v-model:visible="visible" :title="title
    " :width="500" @ok="onSave" @cancel="cancel">
    <a-form ref="formRef" :model="formState" :label-col="{ style: 'width: 100px' }">
      <template v-if="type == 'content'">
        <a-form-item label="内容" required name="content">
          <a-textarea v-model:value="formState.content" placeholder="请输入" :maxlength="300"></a-textarea>
        </a-form-item>
      </template>
      <template v-else-if="type == 'name'">
        <a-form-item label="套餐名称" required name="content">
          <a-input v-model:value="formState.name" placeholder="请输入" :maxlength="50"></a-input>
        </a-form-item>
      </template>
      <template v-else-if="type == 'payFee'">
        <a-form-item label="金额" required name="payFee">
          <a-input v-model:value="formState.payFee" placeholder="请输入" :maxlength="50"></a-input>
        </a-form-item>
      </template>

      <template v-else-if="type == 'totalNum'">
        <a-form-item label="使用次数" required name="totalNum">
          <a-input v-model:value="formState.totalNum" placeholder="请输入" :maxlength="50"></a-input>
        </a-form-item>
      </template>
      <!-- <template v-else-if="type == 'amount'">
        <a-form-item label="信用分" required name="amount">
          <a-input v-model:value="formState.amount" placeholder="请输入" :maxlength="128"></a-input>
        </a-form-item>
      </template> -->
      <!-- <template v-else>
        <a-form-item label="洗发水(ml)" required name="consumeShampoo">
          <a-input v-model:value="formState.consumeShampoo" placeholder="请输入" :maxlength="128"></a-input>
        </a-form-item>
        <a-form-item label="护发素(ml)" required name="consumeConditioner">
          <a-input v-model:value="formState.consumeConditioner" placeholder="请输入" :maxlength="128"></a-input>
        </a-form-item>
        <a-form-item label="养发液(ml)" required name="consumeHairtonic">
          <a-input v-model:value="formState.consumeHairtonic" placeholder="请输入" :maxlength="128"></a-input>
        </a-form-item>
      </template> -->
    </a-form>
  </a-modal>
</template>

<script setup>
// api
import { postDeviceUpdatePackage, postDeviceUpdateBalance } from "@/api/common";

import { useEditModal } from "@/hooks/useEditModal";
import { message } from "ant-design-vue";

const props = defineProps({
  type: {
    type: String,
    default: "",
  },
  data: {
    type: Object,
    default: () => ({}),
  },
});
const titleMsg = {
  name: '套餐名称',
  content: '套餐内容描述',
  packageId: '绑定套餐',
  totalNum: '使用次数',
  payFee: '金额',
}
const title = computed(() => {
  return titleMsg[type.value]
})
const emit = defineEmits(["ok"]);
const rules = {
  dictName: [{ required: true, message: "请输入字典名称" }],
  dictType: [{ required: true, message: "请输入字典类型" }],
};
const formData = reactive({
  amount: "",
  deviceId: "",
  packageId: "",
});
const { visible, formRef, formState } = useEditModal(props, formData);

const onSave = () => {
  formRef.value
    .validate()
    .then(() => {
      postDeviceUpdateBalance({
        deviceId: formState.deviceId,
        // itemList: [
        //   {
        //     packageId: formState.packageId,
        //     amount: formState.amount,
        //   },
        // ],
        packageId: formState.packageId,
        amount: formState.amount,
      }).then(() => {
        message.success("编辑成功");
        formRef.value.resetFields();
        visible.value = false;
        emit("ok");
      });
    })
    .catch((error) => {
      console.log("error", error);
    });
};
const cancel = () => {
  formRef.value.resetFields();
};

defineExpose({
  visible,
});
</script>

<style scoped lang="less"></style>
